<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>5.6交互案例之动态面板封装</title>
  
  <style>
    .m-tabs-header{
      height: 40px;
      border: 1px solid #cccccc;
      display: flex;
      background: #eeeeee;
    }
    .m-tab-title{
      padding-left: 18px;
      padding-right: 18px;
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 14px;
      border-right: 1px solid #cccccc;
      cursor: pointer;
    }
    .m-tab-title-seleted{
      color: #ffffff;
      background: #3778bc;
    }
    .m-tabs-body{
      border: 1px solid #cccccc;
      border-top: none;
    }
    .m-hide{
      display: none;
    }
    h3{
      margin-top: 60px;
    }
  </style>
</head>
<body>
  <h3>标题一显示，其他隐藏</h3>
  <div id="tabs-card-1" class="m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title m-tab-title-seleted">标题一</div>
      <div class="m-tab-title">标题二</div>
      <div class="m-tab-title">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel">内容一</div>
      <div class="m-tab-panel m-hide">内容二</div>
      <div class="m-tab-panel m-hide">内容三</div>
    </div>
  </div>
  <h3>标题二显示，其他隐藏</h3>
  <div id="tabs-card-2" class="m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title">标题一</div>
      <div class="m-tab-title m-tab-title-seleted">标题二</div>
      <div class="m-tab-title">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel m-hide">内容一</div>
      <div class="m-tab-panel">内容二</div>
      <div class="m-tab-panel m-hide">内容三</div>
    </div>
  </div>
  <h3>标题三显示，其他隐藏</h3>
  <div id="tabs-card-3" class="tabs-card-3 m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title">标题一</div>
      <div class="m-tab-title">标题二</div>
      <div class="m-tab-title m-tab-title-seleted">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel m-hide">内容一</div>
      <div class="m-tab-panel m-hide">内容二</div>
      <div class="m-tab-panel">内容三</div>
    </div>
  </div>
  <div id="tabs-card-4" class="tabs-card-3 m-tabs-card">
    <div class="m-tabs-header">
      <div class="m-tab-title">标题一</div>
      <div class="m-tab-title">标题二</div>
      <div class="m-tab-title m-tab-title-seleted">标题三</div>
    </div>
    <div class="m-tabs-body">
      <div class="m-tab-panel m-hide">内容一</div>
      <div class="m-tab-panel m-hide">内容二</div>
      <div class="m-tab-panel">内容三</div>
    </div>
  </div>
  <script>
    /**
     * 定义一个动态面板的函数
     * @param selectorName 选择器名称,如：#aa,.bb
     * return 
     */
    function tab(selectorName) {
      // 获取第一个面板元素
      var mTabsCardDom = document.querySelector(selectorName)
      // 获取所有面板标题元素
      var mTabTitleDomList = mTabsCardDom.querySelectorAll(".m-tabs-card .m-tab-title")
      var mTabPanelDomList = mTabsCardDom.querySelectorAll(".m-tabs-card .m-tab-panel")
      // 遍历面板标题元素
      for(var i=0;i<mTabTitleDomList.length;i++) {
        // 给节点绑定一个索引值-index
        mTabTitleDomList[i].index = i
        // 给每一个标题元素追加一个点击事件
        mTabTitleDomList[i].onclick=function() {
          // 这里的this就是当前点击的那个节点元素
          // 我们通过this.index拿到上面绑定的index值
          // console.log(this.index)
          // 这里再遍历一次，为了重新设置className
          for(var j=0;j<mTabTitleDomList.length;j++) {
            if(j == this.index) {
              // 如果元素的index==j,说明为当前点击的那个元素
              mTabTitleDomList[j].className = 'm-tab-title m-tab-title-seleted'
              mTabPanelDomList[j].className = 'm-tab-panel'
            } else {
              // 非点击元素
              mTabTitleDomList[j].className = 'm-tab-title'
              mTabPanelDomList[j].className = 'm-tab-panel m-hide'
            }
          }
        }
      }
    }

    // 给第一个面板设置js效果
    tab('#tabs-card-1')
    // 给第二个面板设置js效果
    tab('#tabs-card-2')
    // 给第三个面板设置js效果
    tab('.tabs-card-3')
    // 给第四个面板设置js效果
    tab('#tabs-card-4')
  </script>
</body>
</html>